<template>
  <el-container class="demand-card-container border-gre">
    <el-header class="demand-card-title">{{title}}</el-header>
    <el-main class="demand-card-content">{{content}}</el-main>
    <el-footer class="demand-card-fotter">
      <div class="dc-container">
          <div class="dc-content dc-column">
            <el-col :span="24" class="dc-content-desc">
              <el-row>
                <el-col :span="24" style="margin-bottom: 8px;"><span class="fwb">陕西省地理新产业协会</span></el-col>
                <el-col :span="12" >2018/05/10</el-col>
                <el-col :span="6" >
                  <i class="el-icon-view">206</i>
                </el-col>
                <el-col :span="6" >
                  <i class="el-icon-edit">206</i>
                </el-col>
              </el-row>
            </el-col>
          </div>
          <div class="dc-icon dc-column">
            <img v-lazy="imgsrc" alt="" class="demand-card-icon">
          </div>
      </div>
    </el-footer>
  </el-container>
</template>

<script>
  export default {
    name: 'demand-card',
    title: '需求卡片',
    data () {
      return {
        imgsrc: 'static/dilixiehui.png',
        title: '需求名称',
        content: `需求描述：高要求的规划设计调查(简称二类 调查)、出于森林生态状况监测的林分空间结 构调查(林木组成、空间关系等)。如果去实地调查,
        也有字体大小的分类等等这里是需求的详细内容部分，可以是图文结合的，也有字体大小的分类等等这里是需求的详细内容部分，可以是图文结合的`
      }
    }
  }
</script>
<style scoped>
  .demand-card-container {
    padding: 22px;
    border-radius: 10px;
    background-color: #EEEEEE;
    color: #000000;
  }
  .demand-card-container:hover {
    background-color: #FFFFFF;
  }
  .demand-card-container
  .demand-card-title {
    font-size: 18px;
    line-height: 18px;
    padding: 0;
    height: auto!important;
    text-align: left;
    color: #497D03;
  }
  .demand-card-icon {
    width: 50px;
    height: 50px;
  }
  .demand-card-content {
    overflow: hidden;
    height: 120px;
    line-height: 30px;
    color: #414141;
    font-size: 13px;
    margin: 17px 0;
    padding: 0px;
    word-break: break-all;
    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
     -webkit-line-clamp: 4; /** 显示的行数 **/
  }
  .demand-card-fotter {
    text-align: left;
    padding: 0px;
    color: #737373;
    font-size: 12px;
  }
  .dc-container {
      padding-left: 50px;   /* LC width */
  }
  .dc-container .dc-column {
      /* height: 50px; */
      position: relative;
      float: left;
  }
  .dc-content {
      width: 100%;
      height: 50px;
  }
  .dc-icon {
      width: 50px;          /* LC width */
      right: 50px;          /* LC width */
      margin-left: -100%;
  }
  .dc-content-desc {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
</style>
